<template>
    <div class="poa">
        <div class="top">
            <div class="input">
                <inputVue :title="'搜索帖子'" />
            </div>
            <div @click="add" class="right">
                <span class="el-icon-edit"></span>
            </div>
        </div>
        <div class="banner_big">
            <div ref="tab" class="banner_big_top">
                <div ref="tab_item" @click="banner_top_tab(index)" :class="{ 'color': index == banner_index }"
                    v-for="item, index in banner_top" :id="item.id"> {{ item.classname }}
                </div>
            </div>
            <div @touchend="touchend" @touchstart="touchstart" @touchmove="touchmove" class="banner_bottom">
                <loading :flag="loading" />
                <div v-show="!loading" :style="{ width: 100 * banner_top.length + '%' }" ref="banner" class="banner">
                    <div class="item" v-for="item, index in  banner_top ">
                        <loading :flag="!item.children" />
                        <Transition name="op">
                            <div v-show="item.children" class="content">
                                <goods_item v-for="item1, index in item.children" :obj="item1" />
                            </div>
                        </Transition>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import inputVue from './common/inputVue.vue'
import goods_item from './common/goods_item.vue'
import loading from './common/loading.vue'
export default ({
    components: {
        inputVue, goods_item, loading,
    },
    data() {
        return {
            banner_top: [],
            banner_index: 0,
            startX: 0,
            X: 0,
            loading: true,
        }
    },
    methods: {
        add(){
            
        },
        touchend(e) {
            if (this.loading) return
            let banner_index = Math.round(Math.abs(this.X) / 10)
            if (banner_index > this.banner_top.length - 1) {
                banner_index = this.banner_top.length - 1
            } else if (banner_index < 0) {
                banner_index = 0
            }
            this.banner_top_tab(banner_index)
        },
        touchstart(e) {
            this.startX = e.changedTouches[0].pageX
            this.startY = e.changedTouches[0].pageY
            this.X = -this.banner_index * 10
        },
        touchmove(e) {
            if (this.loading) return
            let moveEndX = e.changedTouches[0].pageX
            let moveEndY = e.changedTouches[0].pageY
            if (moveEndY - this.startY > 60 || moveEndY - this.startY < -60) {
                return
            }
            this.X = (-this.banner_index * 10) + (moveEndX - this.startX) / (390 / 10)
            if (moveEndX - this.startX > 0) {
                if ((moveEndX - this.startX) / (390 / 10) < 4) return
                this.X -= 4
            }
            if (moveEndX - this.startX < 0) {
                if ((moveEndX - this.startX) / (390 / 10) > -4) return
                this.X += 4
            }
            if (this.X > 4.5) {
                this.X = 4.5
            } else if (this.X < -(this.banner_top.length - 1) * 10 - 4.5) {
                this.X = -(this.banner_top.length - 1) * 10 - 4.5
            }
            this.$refs.banner.style = `width: ${100 * this.banner_top.length}%; transform: translateX(${this.X}rem)`
        },
        banner_top_tab(index) {
            if (this.loading) return
            this.banner_index = index
            this.$refs.banner.style = `width: ${100 * this.banner_top.length}%; transform: translateX(${-this.banner_index * 10}rem);transition: all 0.5s;`
        },
        axios() {
            if (this.banner_top[this.banner_index].children) return
            // if (this.banner_top[this.banner_index].flag) return
            // this.banner_top[this.banner_index].flag = true
            this.$http({
                url: `http://43.138.15.137:8085/api/postclass/1/post/${this.banner_top[this.banner_index].id}`,
                method: 'get',
            }).then(res => {
                let { list } = res.data.data
                this.banner_top[this.banner_index].children = list
                console.log(this.banner_top[this.banner_index].children);
                this.banner_top.splice()
            })
        },
    },
    created() {
        this.$http({
            url: 'http://43.138.15.137:8085/api/postclass',
            method: 'get',
        }).then(res => {
            if (res.data.msg = '获取成功') {

                this.loading = false
                let { data } = res.data
                this.banner_top = data.list
                this.axios()
            }
        })
    },
    watch: {
        banner_index(nv, ov) {
            this.$refs.tab.scrollLeft = this.$refs.tab_item[0].offsetWidth * (nv - 1) - this.$refs.tab_item[0].offsetWidth / 2 + 7
            this.axios()
        }
    }
})
</script>
<style lang="scss" scoped>
@function r($v) {
    @return $v / (390 /10rem)
}

.op-enter-active {
    animation: shadow 0.5s linear;
}

.op-leave-active {
    animation: shadow 0.5s linear reverse;
}

@keyframes shadow {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

::-webkit-scrollbar {
    display: none;
}

.banner_big {
    color: #333;
    font-size: r(20);
    height: 100%;

    .color {
        color: #FF4A6A;
        font-weight: bold;
        font-size: r(23);
        padding-top: r(7) !important;
    }

    .banner_big_top {
        height: r(60);
        overflow-x: auto;
        display: flex;
        border-bottom: 1px solid #eee;
        scroll-behavior: smooth;

        div {
            padding: r(10) r(18);
            white-space: nowrap;
            display: flex;
            align-items: center;
        }
    }

    .banner_bottom {
        width: 100%;
        overflow: hidden;
        position: relative;
        height: 100%;

        .banner {
            display: flex;
            height: 100%;
            overflow: hidden;

            .item {
                width: 10rem;
                overflow-y: scroll;

                .content {
                    padding-bottom: r(170);
                }

                .banner_loading {
                    width: 100%;
                    text-align: center;
                    line-height: 2rem;
                    color: #333;
                    font-size: r(14);
                }
            }
        }
    }

}

.top {
    height: r(44);
    padding: r(7) r(3);
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    display: flex;
    width: 100%;

    .input {
        flex: 1;
    }

    .right {
        display: flex;
        justify-content: center;
        height: 100%;
        align-items: center;
        width: r(20);
        font-size: r(18);
    }
}
</style>